<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-eg.css" />
</head>
<body>
    <div class="aui-content aui-eg-waterfall-box" id="aui-waterfall-box">
        <ul class="aui-eg-waterfall-panel" id="aui-waterfall-panel">
           
        </ul>
    </div>
    <script id="aui-waterfall-template" type="text/x-dot-template">
        <div class="aui-eg-waterfall-cell">
            <div class="aui-waterfall-header">
                <img src="{{=it.image}}" />
            </div>
            <div class="aui-waterfall-body">{{=it.summary}}</div>
            <div class="aui-waterfall-footer"> 
                <span class="aui-text-info">{{=it.from}}</span>
                <span class="aui-pull-right">
                    <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                </span>
            </div>
        </div>
    </script>
</body>
<script type="text/javascript" src="../script/doT.min.js" ></script>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/aui-eg.js" ></script>
<script type="text/javascript">
    $aui.waterfall_init({
        col:2,//列数
        bottom:10,//元素间距
        space:10,//列间距
        panel:"aui-waterfall-panel",//ul容器id
        box:"aui-waterfall-box"//div容器id
    },function(status,opts){
        if(status){
            var doTtmpl = doT.template($api.byId("aui-waterfall-template").innerHTML);//从id实例化模板
            $aui.waterfall_load({
                col : opts.col,//从init中获取列数,可手填
                doTtmpl : doTtmpl,//实例化模板
                type:0,//数据起点,0=初始化,1=加载更多 
                data:[
                    {
                        image:"../image/index-nodata.png",
                        summary:"瀑布流的效果1",
                        from:"Delicate"
                    },
                    {
                        image:"../image/demo1.png",
                        summary:"瀑布流的效果2",
                        from:"Delicate"
                    },
                    {
                        image:"../image/48.png",
                        summary:"瀑布流的效果3",
                        from:"Delicate"
                    },
                    {
                        image:"../image/header-default-female.png",
                        summary:"瀑布流的效果4",
                        from:"Delicate"
                    },
                    {
                        image:"../image/47.png",
                        summary:"瀑布流的效果5",
                        from:"Delicate"
                    },
                    {
                        image:"../image/demo1.png",
                        summary:"瀑布流的效果6",
                        from:"Delicate"
                    },
                    {
                        image:"../image/48.png",
                        summary:"瀑布流的效果7",
                        from:"Delicate"
                    },
                    {
                        image:"../image/header-default-male.png",
                        summary:"瀑布流的效果8",
                        from:"Delicate"
                    },
                    {
                        image:"../image/index-default.png",
                        summary:"瀑布流的效果9",
                        from:"Delicate"
                    },
                    {
                        image:"../image/49.png",
                        summary:"瀑布流的效果10",
                        from:"Delicate"
                    },
                    {
                        image:"../image/demo2.png",
                        summary:"瀑布流的效果11",
                        from:"Delicate"
                    },
                    {
                        image:"../image/50.png",
                        summary:"瀑布流的效果12",
                        from:"Delicate"
                    }
                ]//模板数据
            },function(){
            });
        }
    });
apiready = function(){
}
</script>
</html>